<template>
    <div class="master-detail-container">
      <el-card class="master-detail-card">     
  
        <!-- 查询条件 -->
        <el-form :model="queryForm" label-width="100px" class="query-form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="工单编号">
                <el-input v-model="queryForm.orderNo" placeholder="请输入工单编号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="程序序号">
                <el-input v-model="queryForm.program_seq" placeholder="请输入程序序号" clearable />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="订单状态">
                <el-select v-model="queryForm.status" placeholder="请选择订单状态" clearable>
                  <el-option label="待付款" value="pending" />
                  <el-option label="已付款" value="paid" />
                  <el-option label="已发货" value="shipped" />
                  <el-option label="已完成" value="completed" />
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>
        </el-form>
        <template #header>
          <div class="card-header">
            <span>刀具负载查询</span>
            <div class="header-buttons">
              <el-button type="primary" @click="handleSearch" :loading="loading">查询</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-link type="primary" href="#/EQU_EQUIPMENT_LOAD" target="_self">设备负载</el-link>
            </div>
          </div>
        </template>
        <!-- 主表数据 -->
        <div class="table-container">
          <el-table
            v-loading="loading"
            :data="masterData"
            style="width: 100%"
            @row-click="handleMasterRowClick"
            highlight-current-row
          >
            <el-table-column prop="identifier" label="工单" width="180" />
            <el-table-column prop="program_seq" label="程序序号" width="150" />
             <el-table-column prop="tool_name" label="刀具名" width="180" />
             <el-table-column prop="holderTypeId" label="刀柄" width="180" />            
            <el-table-column prop="toolSpeed" label="标准速度" width="120"/>
            <el-table-column prop="minToolLoad" label="阈值（min）" width="180" />
            <el-table-column prop="maxToolLoad" label="阈值（max）" width="180" />
            <!--<el-table-column prop="totalAmount" label="订单金额" width="120">
              <template #default="scope">
                ¥{{ scope.row.totalAmount.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="订单状态" width="100">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">
                  {{ getStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column> 
            <el-table-column prop="remark" label="备注" />-->
          </el-table>
        </div>
  
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[1,10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
  
        <!-- 明细表数据 -->
        <div v-if="selectedOrder" class="detail-container">
          <!-- <div class="detail-header">
            <h3>工单明细 - {{ selectedOrder.orderNo }}</h3>
          </div> -->
          <el-table
            v-loading="detailLoading"
            :data="detailData"
            style="width: 100%"
          >
  
            <el-table-column prop="ts" label="时间" width="220" />
            <el-table-column prop="cncNo" label="设备号" width="150" />
            <!--<el-table-column prop="toolName" label="单位" width="80" />
             <el-table-column prop="ToolSpeed" label="数量" width="100" /> -->
            <el-table-column prop="toolLoad" label="负载" width="120">
              <template #default="scope">
                {{ scope.row.toolLoad.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="toolSpeed" label="速度" width="120">
              <template #default="scope">
                {{ scope.row.toolSpeed.toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPageDetails"
            v-model:page-size="pageSizeDetails"
            :page-sizes="[1,10, 20, 50, 100]"
            :total="totalDetails"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChangeDetails"
            @current-change="handleCurrentChangeDetails"
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
 

  import { getOrderList, getOrderDetail } from "@/extension/system/workbusiness/Test3.js";
  // 查询表单
  const queryForm = reactive({
    orderNo: '',
    program_seq: '',
    status: ''
  })
  const queryFormdetails = reactive({
    orderNo: '',
    limit: 100,
    status: ''
  })
  // 加载状态
  const loading = ref(false)
  const detailLoading = ref(false)
  
  // 分页相关
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)

  const currentPageDetails = ref(1)
  const pageSizeDetails = ref(10)
  const totalDetails = ref(0)
  const limit=ref(0)
  
  // 主表数据
  const masterData = ref([])
  
  // 选中的订单
  const selectedOrder = ref(null)
  
  // 明细表数据
  const detailData = ref([])
  
  // 获取状态类型
  const getStatusType = (status) => {
    const statusMap = {
      pending: 'warning',
      paid: 'primary',
      shipped: 'success',
      completed: 'info'
    }
    return statusMap[status] || 'info'
  }
  
  // 获取状态文本
  const getStatusText = (status) => {
    const statusMap = {
      pending: '待付款',
      paid: '已付款',
      shipped: '已发货',
      completed: '已完成'
    }
    return statusMap[status] || '未知'
  }
  
  // 获取订单列表
  const fetchOrderList = async () => {
    loading.value = true
    try {
      const params = {
        
        page: currentPage.value,
        pageSize: pageSize.value,
        ...queryForm
      }
      const res = await getOrderList(params)
      masterData.value = res.data
      total.value = res.total
    } catch (error) {
      console.error('获取订单列表失败:', error)
      ElMessage.error('获取订单列表失败')
    } finally {
      loading.value = false
    }
  }
  
  // 获取订单明细
  const fetchOrderDetail = async (orderId) => {
    detailLoading.value = true
    
    try {
        const params = {
        orderId: orderId,
        page: currentPageDetails.value,
        pageSize: pageSizeDetails.value,
        limit: limit.value
      }
      const res = await getOrderDetail(orderId,params)
      
      debugger;
      console.log("res",res)
      if(res.isLoad==true)
      {
        detailData.value = res.data
      totalDetails.value = res.total
      handleSearch();
      }
      
    } catch (error) {
      console.error('获取订单明细失败:', error)
      ElMessage.error('获取订单明细失败')
    } finally {
      detailLoading.value = false
    }
  }
  
  // 处理主表行点击
  const handleMasterRowClick = async (row) => {
    selectedOrder.value = row
    await fetchOrderDetail(row.id)
  }
  
  // 处理查询
  const handleSearch = () => {
    currentPage.value = 1
    fetchOrderList()
  }
  
  // 重置表单
  const resetForm = () => {
    queryForm.orderNo = ''
    queryForm.program_seq = ''
    queryForm.status = ''
    currentPage.value = 1
    fetchOrderList()
    ElMessage.success('已重置查询条件')
  }
  
  // 处理分页大小变化
  const handleSizeChange = (val) => {
    pageSize.value = val
    fetchOrderList()
  }
  const handleSizeChangeDetails = (val) => {
    pageSizeDetails.value = val
    console.log("selectedOrder.value",selectedOrder.value.id)
    fetchOrderDetail(selectedOrder.value.id)
  }
  
  // 处理页码变化
  const handleCurrentChange = (val) => {
    currentPage.value = val
    fetchOrderList()
  }
  const handleCurrentChangeDetails = (val) => {
    currentPageDetails.value = val
    //selectedOrder.value = row
    console.log("selectedOrder.value",selectedOrder.value.id)
    //await fetchOrderDetail(row.id)
    fetchOrderDetail(selectedOrder.value.id)
  }
  
  // 组件挂载时获取数据
  onMounted(() => {
    fetchOrderList()
  })
  </script>
  
  <style scoped>
  .master-detail-container {
    padding: 20px;
  }
  
  .master-detail-card {
    width: 100%;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header-buttons {
    display: flex;
    gap: 10px;
  }
  
  .query-form {
    margin-bottom: 5px;
    padding: 5px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  
  .table-container {
    margin-bottom: 20px;
  }
  
  .pagination-container {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
  }
  
  .detail-container {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
  }
  
  .detail-header {
    margin-bottom: 15px;
  }
  
  .detail-header h3 {
    margin: 0;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
  }
  </style> 